<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/modules/cms/front/include/taglib.jsp"%>
	<head>
		<title>职业性格测试
		</title>
		<meta name="decorator" content="cms_default_${site.theme}"/>
		<meta name="description" content="JeeSite ${site.description}"/>
		<meta name="keywords" content="JeeSite ${site.keywords}"/>
		<link rel="stylesheet" href="${ctxStatic}/css/main.css"/>
		<link rel="stylesheet" href="${ctxStatic}/css/style.css"/>
		<script type="text/javascript">
			function course(obj,id,answer){
				$("#"+id).val(id+"-"+answer);
				$(obj).parent().parent().find("a").css("background","url(${ctxStatic}/img/myup.png) no-repeat left center");
				$(obj).css("background","url(${ctxStatic}/img/myon.png) no-repeat left center");
			}
			function page(n,s,end){
				$("#pageNo").val(n);
				$("#pageSize").val(s);
				if(end == "end"){
					$("#searchForm").append($("<input type='hidden' name='end' value='"+end+"'/>"));
				}
				var recordInput = addSeparator('answerRecord','record');
				if(!recordInput){
					return false;
				}
				$("#searchForm").append(recordInput);
				$("#searchForm").submit();
	        	return false;
	        }
		    //将names的值加上|分隔符  返回一个input对象
		    function addSeparator(name,newName){
		    	var val = "";
		    	var names = document.getElementsByName(name);
	            for(var i=0; i<names.length; i++){
	                if(names[i].value==''){
	                	layer.msg(names[i].id.split("-")[0]+"题还未作答！");
	                    return false;
	                }
	                val += names[i].value+"|";
	            }
	            val = val.substring(0,val.length-1);
	            return $("<input type='hidden' name='"+newName+"' value='"+val+"'/>");
		    }
		</script>
	</head>
<body>
	<form:form id="searchForm" modelAttribute="mbtiTheme" action="${ctx}/front/mbtiThemeTest" method="post" class="breadcrumb form-search">
		<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
		<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
		<input id="part" name="part" type="hidden" value="${mbtiTheme.part}"/>
	</form:form>
	
			<div class="shop-center">
				<div class="course-tit">
					<h1>职业性格测试</h1>
				</div>
				<div class="course">
					<div class="course-lt">
						<ul class="course-li">
							<c:if test="${page.pageNo == 1}">
								<c:if test="${mbtiTheme.part == 1}">一、哪一个答案最能贴切的描绘你一般的感受或行为？</c:if>
								<c:if test="${mbtiTheme.part == 2}">二、在下列每一对词语中，哪一个词语更合你心意？请仔细想想这些词语的意义，而不要理会他们的字形或读音。</c:if>
								<c:if test="${mbtiTheme.part == 3}">三、哪一个答案最能贴切地描绘你一般的感受或行为？</c:if>
								<c:if test="${mbtiTheme.part == 4}">四、在下列每一对词语中，哪一个词语更合你心意？</c:if>
							</c:if>
							<c:forEach items="${page.list}" var="mbtiTheme">
								<li>
									<c:set var="themeRecord" value="${fns:getByUserIdAndThemeId(mbtiTheme.id,'2')}" scope="request"/> 
									<h1>${mbtiTheme.sequence}.${mbtiTheme.title}</h1>
									<input type="hidden" id="${mbtiTheme.sequence}-${mbtiTheme.id}" name="answerRecord" <c:if test="${not empty themeRecord}">value="${mbtiTheme.sequence}-${mbtiTheme.id}-${themeRecord.answer}-${themeRecord.score}"</c:if>/>
									<p><a href="javascript:;"  
											<c:if test="${themeRecord != null && themeRecord.score == mbtiTheme.answerA}">style="background:url(${ctxStatic}/img/myon.png) no-repeat left center"</c:if>
										onclick="course(this,'${mbtiTheme.sequence}-${mbtiTheme.id}','A-${mbtiTheme.answerA}')">A ${mbtiTheme.chooseA}</a></p>
									<p><a href="javascript:;" 
										<c:if test="${themeRecord != null && themeRecord.score == mbtiTheme.answerB}">style="background:url(${ctxStatic}/img/myon.png) no-repeat left center"</c:if>
										onclick="course(this,'${mbtiTheme.sequence}-${mbtiTheme.id}','B-${mbtiTheme.answerB}')">B ${mbtiTheme.chooseB}</a></p>
								</li>
							</c:forEach>						
						</ul>
					</div>
					<div class="course-rt">
						<h1>热点推荐</h1>
						<div class="course-img">
							<img src="${ctxStatic}/img/img1.png"/>
							<p>放声大哭刘凡家</p>
						</div>
					</div>
				</div>				
			</div>
			<div class="peper">
				${upAndDown}
			</div>
</body>

